前端吸顶功能，滚动到一定位置时固定到顶部 |
您所在的位置：网站首页 › vue 顶部导航固定 › 前端吸顶功能，滚动到一定位置时固定到顶部 |
前端吸顶功能，滚动到一定位置时固定到顶部
|
适用环境：菜单滑动后固定，搜索框的固定 （只做全了功能，没有写完美样式，明白原理，样式可自行调整，为了区分效果，颜色反差比较明显）先看图：
下面贴上代码 吸顶容器 .body { margin: 0px !important; padding: 0; box-sizing: border-box; } .road-tab-fixed { position: fixed; top: 0%; width: 100%; } .top { background: #c4f8b4; height: 50px; } .list { background: #ccc; width: 100%; } .list li { height: 50px; border-bottom: 2px solid #f00; } .banner { width: 100%; background: #c19aff; height: 150px; } 这是广告图 菜单 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 const fixedDom = $("#road-tab"), tabclass = "road-tab-fixed"; let beforeElementScrollTop = 0; let beforeOffsetTop = fixedDom[0].offsetTop; //scroll节流 const throttle = (func, wait, mustRun) => { var timeout, startTime = new Date(); return function () { var context = this, args = arguments, curTime = new Date() clearTimeout(timeout) // 如果达到了规定的触发时间间隔，触发 handler if (curTime - startTime >= mustRun) { beforeElementScrollTop = document.documentElement.scrollTop console.log("beforelementScrollTop----------", document.body.scrollTop); func.apply(context, args); startTime = curTime // 没达到触发间隔，重新设定定时器 } else { timeout = setTimeout(func, wait) } } } const winScroll = (e) => { const elementScrollTop = document.documentElement.scrollTop console.log('elementScrollTop--------------', elementScrollTop); if (beforeElementScrollTop - elementScrollTop = 0) { console.log("UUUUUU"); fixedDom.removeClass("road-tab-fixed") } } }; $(window).off("scroll").on("scroll", throttle(winScroll, 10, 100)); 主要运用到了scrollTop和offsetTop。vue的写法 头部展示内容------------- 头部展示内容------------- 头部展示内容------------- 头部展示内容------------- 头部展示内容------------- 头部展示内容------------- 头部展示内容------------- 头部展示内容------------- 头部展示内容------------- 头部展示内容------------- 头部展示内容------------- 头部展示内容------------- 头部展示内容------------- 自动粘滞固定头部，需要一直展示的 tabs内部内容，最帅程序员专享受------我的最爱--李易峰 tabs内部内容，最帅程序员专享受------我的最爱--李易峰 tabs内部内容，最帅程序员专享受------我的最爱--李易峰 tabs内部内容，最帅程序员专享受------我的最爱--李易峰 tabs内部内容，最帅程序员专享受------我的最爱--李易峰 tabs内部内容，最帅程序员专享受------我的最爱--李易峰 tabs内部内容，最帅程序员专享受------我的最爱--李易峰 tabs内部内容，最帅程序员专享受------我的最爱--李易峰 tabs内部内容，最帅程序员专享受------我的最爱--李易峰 tabs内部内容，最帅程序员专享受------我的最爱--李易峰 tabs内部内容，最帅程序员专享受------我的最爱--李易峰 tabs内部内容，最帅程序员专享受------我的最爱--李易峰 tabs内部内容，最帅程序员专享受------我的最爱--李易峰 tabs内部内容，最帅程序员专享受------我的最爱--李易峰 tabs内部内容，最帅程序员专享受------我的最爱--李易峰 tabs内部内容，最帅程序员专享受------我的最爱--李易峰 tabs内部内容，最帅程序员专享受------我的最爱--李易峰 tabs内部内容，最帅程序员专享受------我的最爱--李易峰 tabs内部内容，最帅程序员专享受------我的最爱--李易峰 tabs内部内容，最帅程序员专享受------我的最爱--李易峰 tabs内部内容，最帅程序员专享受------我的最爱--李易峰 export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App', auto_fixed: { fixed: false } } }, methods: { onScroll(){ let scrolled = document.documentElement.scrollTop || document.body.scrollTop let header_height = null if(document.getElementsByClassName('header')[0]){ header_height = document.getElementsByClassName('header')[0].offsetHeight } console.log('滚动的距离:'+scrolled,'头部的高度:'+ header_height) this.auto_fixed = { auto_fixed: true, fixed: scrolled >= header_height } } }, mounted(){ this.$nextTick(function () { window.addEventListener('scroll', this.onScroll) }) } } .main{ } .header{ padding: 8px 10px; } .auto_fixed{ height: 3em; background: orange; line-height: 3em; text-align: center; } .fixed{ position: fixed; top: 0px; width: 100%; } .content{ color: gray; padding: 8px; } 第三种方式beforeDestroy() { //在组件生命周期结束的时候销毁。 window.removeEventListener('scroll', this.scrollhandle); document.documentElement.scrollTop = 0 }, methods: { listenerAction() { window.addEventListener('scroll', this.scrollhandle); document.documentElement.scrollTop = 0 }, scrollhandle(event) { let scrolled = document.documentElement.scrollTop || document.body.scrollTop let header_height = null if (document.getElementsByClassName('header')[0]) { header_height = document.getElementsByClassName('header')[0].offsetHeight } console.log('滚动的距离:' + scrolled, '头部的高度:' + header_height) this.auto_fixed = { auto_fixed: true, fixed: scrolled >= header_height } } }, mounted() { // 保证在DOM渲染完毕后初始化, 20秒是经验值 setTimeout(() => { this.listenerAction() }, 20); }, |
【本文地址】